<template>
  <!-- 经纪人认证 -->
  <div class="box">
    <heads></heads>
    <div class="tit">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <!-- <div class="rig">
          <div class="but">下载帮帮同城app</div>
        </div> -->
      </div>
    </div>
    <div class="form">
      <div class="name">经纪人认证</div>
      <div class="list">
        <div class="li">
          <div class="left"><span>*</span>姓名</div>
          <div class="right">
            <input v-model="userName" placeholder="请填写经纪人名称" />
          </div>
        </div>
        <div class="li">
          <div class="left"><span>*</span>联系方式</div>
          <div class="right">
            <input v-model="phone" type="number" oninput="if(value.length>11)value=value.slice(0,11)"
              placeholder="请填写经纪人联系电话" disabled='true' />
          </div>
        </div>
        <div class="li" v-if="isselect == '0'">
          <div class="left"><span>*</span>所属门店</div>
          <div class="right">
            <div class="right" @click="shopinfo">
              <input v-model="shopName" placeholder="请选择门店" disabled="disabled" />
            </div>
          </div>
        </div>
        <!-- <div class="li tuLi">
          <div class="left">
            <span>*</span>头像
          </div>
          <div class="tu">
            <el-upload
              :action="$upLoad"
               :list-type="portraitImg == '' ? 'picture-card' : ''"
              :on-success="portraitSuccess"
              :on-remove="portraitRemove"
              :limit="1"
							:file-list="image"
            >
              <i class="el-icon-plus" v-if="portraitImg==''"></i>
              <img :src="portraitImg" style="width:150px;height:150px;object-fit: contain;cursor: pointer;background-color: #fff;" v-if="portraitImg!==''"/>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
            <p class="shuoming">
              上传要求清晰、健康、代表品牌形象
              请勿使用二维码，最大5m，200*200像素
            </p>
          </div>
        </div> -->
        <!-- <div class="li tuLi">
          <div class="left">
            <span>*</span>名片
          </div>
          <div class="tu">
            <el-upload
              :action="$upLoad"
               :list-type="cardImg == '' ? 'picture-card' : ''"
              :on-success="cardSuccess"
              :on-remove="cardRemove"
              :limit="1"
							:file-list="businessCard"
            >
              <i class="el-icon-plus" v-if="cardImg==''"></i>
              <img :src="cardImg" style="width:150px;height:150px;object-fit: contain;cursor: pointer;background-color: #fff;" v-if="cardImg!==''"/>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
            <p class="shuoming">上传要求信息清晰、最大2m</p>
          </div>
        </div> -->
        <!-- <div class="li tuLi">
          <div class="left">
            <span>*</span>营业执照
          </div>
          <div class="tu">
            <el-upload
              :action="$upLoad"
               :list-type="yyzzImg == '' ? 'picture-card' : ''"
              :on-success="yyzzSuccess"
              :on-remove="yyzzRemove"
              :limit="1"
							:file-list="businessLicense"
            >
              <i class="el-icon-plus" v-if="yyzzImg==''"></i>
              <img :src="yyzzImg" style="width:150px;height:150px;object-fit: contain;cursor: pointer;background-color: #fff;" v-if="yyzzImg!==''"/>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
            <p class="shuoming">上传要求信息清晰、最大2m</p>
          </div>
        </div> -->
        <div class="li tuLi">
          <div class="left" style="width: 230px; margin-bottom: 24px">
            <span>*</span>身份证（信息面）
          </div>
          <div class="tu1">
            <!--  :file-list="idCardUp" -->
            <el-upload :action="$upLoad" :list-type="sfzUpImg == '' ? 'picture-card' : ''" :on-remove="sfzUpRemove"
              :on-success="sfzUpSuccess" :limit="1" ref='upload1' :on-change="uploadFile1" :auto-upload="false">
              <img class="sfz" src="../../assets/sfz_g.png" v-show="sfzup" />
              <img class="sfz" :src="sfzUpImg" style="
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                " v-show="!sfzup" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
        <div class="li tuLi">
          <div class="left" style="width: 230px; margin-bottom: 24px">
            <span>*</span>身份证（国徽面）
          </div>
          <div class="tu1">
            <!--  :file-list="idCardDown" -->
            <el-upload :action="$upLoad" :list-type="sfzDownImg == '' ? 'picture-card' : ''" :on-remove="sfzDownRemove"
              :on-success="sfzDownSuccess" :limit="1" ref='upload2' :on-change="uploadFile2" :auto-upload="false">
              <img class="sfz" src="../../assets/sfz_gs.png" v-show="sfzdow" />
              <img class="sfz" :src="sfzDownImg" style="
                  object-fit: contain;
                  cursor: pointer;
                  background-color: #fff;
                " v-show="!sfzdow" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <div class="queding" style="cursor: pointer" @click="sub" v-if="status == 3">
      提交审核
    </div>
    <div class="queding" style="cursor: pointer" v-if="status == 0">店铺审核中</div>
    <div class="queding" style="cursor: pointer" v-if="status == 2">平台审核中</div>
    <div class="queding" style="cursor: pointer" v-if="status == 1">已通过</div>
    <div class="queding" style="cursor: pointer; background-color: #e54d42" v-if="status == 2">
      商家已通过
    </div>
    <div style="
        cursor: pointer;
        width: 1200px;
        margin: auto;
        text-align: center;
        color: #333;
      " v-if="status == 2">
      理由：{{ jjPerson }}
    </div>
    <floor></floor>
    <el-dialog title="门店" :visible.sync="loading" width="30%">
      <div style="display: flex; margin-bottom: 20px">
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="serchtxt">
        </el-input>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="serch">搜索</el-button>
      </div>
      <div @click="shop(item.shopName, item.id)" style="display: flex; margin-bottom: 20px; cursor: pointer"
        v-for="(item, index) in shopList" :key="index">
        <img style="width: 150px; height: 100px; margin-right: 10px" :src="$img + item.image" />
        <div style="display: flex; flex-direction: column; justify-content: center">
          <div style="font-size: 18px; color: #000">{{ item.shopName }}</div>
          <div style="height: 20px"></div>
          <div>地址：{{ item.shopAddress }}</div>
        </div>
      </div>
      <el-pagination background layout="prev, pager, next" :total="shopTotal" :current-page="shopPage.pageNo"
        @current-change="shopchange"></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";

export default {
  components: {
    floor,
    heads,
  },
  data() {
    return {
      dutyStatus: "",
      serchtxt: "",
      xuan: "",
      dialogImageUrl: "",
      dialogVisible: false,
      addressList: [],
      userName: "",
      phone: JSON.parse(localStorage.getItem("userInfo")).phone,
      sfzup: true,
      sfzdow: true,
      // cardImg:'',
      // portraitImg:'',
      // yyzzImg:'',
      sfzUpImg: "",
      sfzDownImg: "",
      shopPage: {
        pageNo: 1,
        pageSize: 10,
        latitude: 30.497468,
        longitude: 114.348025,
        status: "1",
        shopType: "1",
      },
      loading: false,
      shopId: "",
      shopName: "",
      shopList: [],
      shopTotal: 0,
      status: 3,
      confirmDuty: "",
      image: [],
      businessCard: [],
      businessLicense: [],
      idCardUp: [],
      idCardDown: [],
      jjPerson: "",
      isselect: "0",
      userInfo: {},
      id: "",
    };
  },
  mounted() { },
  created() {
    this.getAgentInfo();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (this.userInfo.shopId) {
      this.shopId = this.userInfo.shopId;
      this.isselect = "1";
    }
  },
  methods: {
    uploadFile1(file, fileList) {
      if (file.percentage + "" == "0") {
        // this.$refs.upload1.clearFiles()
        const isJPG = file.raw.type.substring(0, 5) === "image" || file.raw.type.substring(6, 7) == 'g';
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload1`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload1`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        this.$refs.upload1.submit();
      }
    },
    uploadFile2(file, fileList) {
      if (file.percentage + "" == "0") {
        // this.$refs.upload1.clearFiles()
        const isJPG = file.raw.type.substring(0, 5) === "image" || file.raw.type.substring(6, 7) == 'g';
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$refs[`upload2`].clearFiles();

          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$refs[`upload2`].clearFiles();

          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        this.$refs.upload2.submit();
      }
    },
    //查询门店
    getShopInfo() {
      this.$getHttp("/mob/user/getShopInfo", this.shopPage).then((data) => {
        if (data.code == 200) {
          data.page.list.forEach((e) => {
            e.image = e.image.split("|")[0];
          });
          this.shopList = data.page.list;
          this.shopTotal = data.page.count;
        }
      });
    },
    //查询该用户是否申请过,是否符合申请条件
    getAgentInfo() {
      this.$getHttp("/mob/user/getAgentInfoByUserIdIsQuit", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
      }).then((data) => {
        if (data.code == 200) {
          console.log(data);
          //未申请
          if (data.IsExistence) {
            this.status = 3;
            //之前已申请 未离职
          } else if (!data.IsExistence && data.agentInfo.isQuit == "false") {
            this.setData(data);
            //之前已申请 已离职
          } else if (!data.IsExistence && data.agentInfo.isQuit == "true") {
            this.setData(data);
            this.dutyStatus = data.agentInfo.dutyStatus;
            this.status = 3;
          }
          //申请过经纪人认证
          // if(data.hasOwnProperty('agentInfo')){
          // 	if(data.agentInfo.status == 2){
          // 		this.jjPerson = data.agentInfo.jjPerson
          // 	}
          // 	this.sfzdow = false
          // 	this.sfzup = false
          // 	this.status = data.agentInfo.status
          // 	this.shopId = data.agentInfo.shopId
          // 	//shopName:this.shopId,
          // 	this.userName = data.agentInfo.userName
          // 	this.phone = data.agentInfo.phone
          // 	this.cardImg = data.agentInfo.businessCard
          // 	this.portraitImg = data.agentInfo.image
          // 	this.yyzzImg = data.agentInfo.businessLicense
          // 	this.sfzUpImg = data.agentInfo.idCardUp
          // 	this.sfzDownImg = data.agentInfo.idCardDown
          // 	this.image.push({
          // 		name:'img',
          // 		url:this.$img+data.agentInfo.image
          // 	})
          // 	this.businessCard.push({
          // 		name:'img',
          // 		url:this.$img+data.agentInfo.businessCard
          // 	})
          // 	this.businessLicense.push({
          // 		name:'img',
          // 		url:this.$img+data.agentInfo.businessLicense
          // 	})
          // 	this.idCardUp.push({
          // 		name:'img',
          // 		url:this.$img+data.agentInfo.idCardUp
          // 	})
          // 	this.idCardDown.push({
          // 		name:'img',
          // 		url:this.$img+data.agentInfo.idCardDown
          // 	})
          // }
        }
      });
    },
    setData(data) {
      console.log(data);
      this.sfzdow = false;
      this.sfzup = false;
      this.status = data.agentInfo.status;
      this.shopId = data.agentInfo.shopId;
      this.shopName = data.agentInfo.shopName;
      this.userName = data.agentInfo.userName;
      this.phone = data.agentInfo.phone;
      this.id = data.agentInfo.id;
      // this.cardImg = data.agentInfo.businessCard
      // this.portraitImg = data.agentInfo.image
      // this.yyzzImg = data.agentInfo.businessLicense
      this.sfzUpImg = data.agentInfo.idCardUp;
      this.sfzDownImg = data.agentInfo.idCardDown;
      this.image.push({
        name: "img",
        url: this.$img + data.agentInfo.image,
      });
      this.businessCard.push({
        name: "img",
        url: this.$img + data.agentInfo.businessCard,
      });
      this.businessLicense.push({
        name: "img",
        url: this.$img + data.agentInfo.businessLicense,
      });
      this.idCardUp.push({
        name: "img",
        url: this.$img + data.agentInfo.idCardUp,
      });
      this.idCardDown.push({
        name: "img",
        url: this.$img + data.agentInfo.idCardDown,
      });
    },
    shopinfo() {
      this.loading = true;
      this.shopPage.pageNo = 1;
      this.getShopInfo();
    },
    shopchange(e) {
      this.shopPage.pageNo = e;
      this.getShopInfo();
    },
    shop(shopname, id) {
      this.loading = false;
      this.shopName = shopname;
      this.shopId = id;
    },
    serch() {
      const txt = this.serchtxt.trim();
      if (txt.length == 0) {
        delete this.shopPage.shopName;
      } else {
        this.shopPage.shopName = txt;
      }
      this.shopPage.pageNo = 1;
      this.getShopInfo();
    },
    async sub() {
      // if(!await this.authUser('经纪人认证')) return
      // 名片、营业执照、头像图片去掉
      // yyzzImg &&this.portraitImg != ''  && this.cardImg != ''
      console.log(this.sfzUpImg)
      if (
        this.userName != "" &&
        this.shopId > 0 &&
        this.phone != "" &&
        this.sfzUpImg != "" &&
        this.sfzDownImg != ""
      ) {
        this.$confirm("确定认证此店铺的经纪人?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // console.log(this.sfzUpImg);
            // console.log(this.sfzDownImg);
            //认证
            this.$postHttp("/mob/user/saveAgentInfo", {
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              shopId: this.shopId,
              userName: this.userName,
              phone: this.phone,
              id: this.dutyStatus != "2" ? this.id : "",
              //  image:this.portraitImg,
              //  businessCard:this.cardImg,
              //  businessLicense:this.yyzzImg,
              idCardUp: this.sfzUpImg,
              idCardDown: this.sfzDownImg,
            }).then((data) => {
              if (data.code == 200) {
                if (data.success) {
                  this.$message({
                    message: "提交成功，请等待审核！",
                    type: "success",
                    offset: 120,
                    duration: 2000,
                  });
                } else {
                  this.$message({
                    message: data.msg,
                    type: "success",
                    offset: 120,
                    duration: 2000,
                  });
                }
                setTimeout(() => {
                  this.$router.push({
                    path: "/",
                  });
                }, 1000);
              }
            });
          })
          .catch(() => { });

      } else {
        this.$message({
          message: "必填项不能为空！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    portraitRemove(file, fileList) {
      this.portraitImg = "";
    },
    yyzzRemove(file, fileList) {
      this.yyzzImg = "";
    },
    cardRemove(file, fileList) {
      this.cardImg = "";
    },
    sfzUpRemove(file, fileList) {
      this.sfzUpImg = "";
      this.sfzup = true;
    },
    sfzDownRemove(file, fileList) {
      this.sfzDownImg = "";
      this.sfzdow = true;
    },
    portraitSuccess(response, file, fileList) {
      this.portraitImg = response.data[0].url;
    },
    yyzzSuccess(response, file, fileList) {
      this.yyzzImg = response.data[0].url;
    },
    sfzUpSuccess(response, file, fileList) {
      this.sfzUpImg = response.data[0].url;
      this.sfzup = false;
      this.$refs.upload1.clearFiles()
    },
    sfzDownSuccess(response, file, fileList) {
      this.sfzdow = false;
      this.sfzDownImg = response.data[0].url;
      this.$refs.upload2.clearFiles()

    },
    cardSuccess(response, file, fileList) {
      this.cardImg = response.data[0].url;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-input__inner {
  width: 200px;
}

/deep/.el-input {
  width: 200px;
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .rig {
      position: absolute;
      right: 0;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .but {

      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.form {
  width: 700px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333;

  .name {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 35px;
  }

  .list {
    .li {
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 16px;
      margin-top: 20px;

      .left {
        display: inline-block;
        width: 140px;
        font-size: 20px;
        font-weight: 600;
        margin-right: 5px;

        span {
          color: red;
        }
      }

      .right {
        display: inline-block;
        width: 550px;

        input {
          width: 99%;
          font-size: 20px;
          background-color: #fff;
          cursor: pointer;
        }

        .el-select {
          width: 99%;

          /deep/.el-input__inner {
            border: 0;
            padding: 0;
            font-size: 20px;
          }
        }

        /deep/.el-radio__label {
          font-size: 18px;
        }

        /deep/.el-radio__inner {
          width: 28px;
          height: 28px;
        }

        /deep/.el-radio__input.is-checked .el-radio__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }

        /deep/.el-radio__inner::after {
          box-sizing: content-box;
          content: "";
          border: 2px solid #fff;
          position: absolute;
          transform: rotate(45deg) scaleY(1);
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0);
          width: 6px;
          height: 13px;
          left: 9px;
          top: 4px;
          border-left: 0;
          border-top: 0;
        }

        /deep/.el-radio__input.is-checked+.el-radio__label {
          color: #333;
        }
      }

      .tu {
        position: relative;
        margin-top: 24px;
        width: 100%;
        font-size: 18px;

        .el-textarea {
          font-size: 18px;
        }

        .textarea {
          /deep/.el-textarea__inner {
            width: 698px;
            min-height: 80px !important;
            line-height: 25px;
            outline: none;
            padding: 10px 13px 30px 13px;
            overflow-y: visible;
          }
        }

        .zi {
          position: absolute;
          font-size: 14px;
          z-index: 99;
          right: 10px;
          bottom: 10px;
          color: #999999;
        }

        .shuoming {
          position: absolute;
          top: 0px;
          left: 180px;
          width: 308px;
          font-size: 18px;
          color: #999999;
          display: inline-block;
        }
      }

      .tu1 {
        position: relative;

        .sfz {
          // position: absolute;
          width: 683px;
          height: 242px;
          top: 0px;
          left: 0px;
        }

        /deep/.el-upload--picture-card {
          width: 683px;
          height: 242px;
        }
      }
    }

    .tuLi {
      border: 0;
    }
  }
}

.queding {
  width: 300px;
  height: 60px;
  background: #64b6a8;
  border-radius: 6px;
  text-align: center;
  line-height: 60px;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  margin-bottom: 50px;
}
</style>
